<template>
  <div class="image-option-panel">
    <el-tabs v-model="activeTab" class="config-tabs">
      <el-tab-pane label="基础配置" name="basic">
        <div class="config-section">
          <el-form label-position="top">
            <el-form-item label="提示信息">
              <el-input 
                v-model="localConfig.text" 
                placeholder="请输入提示信息"
                @change="(val:any) => updateField('text', val)"
              />
            </el-form-item>
			<el-form-item label="加载资源">
			  <el-input-number v-model="localConfig.total" :min="1" :max="10000" @change="(val:any) => updateField('total', val)" />
			</el-form-item>
			<el-form-item label="自动更新进度条">
				
				<el-radio-group v-model="localConfig.auto" @change="(val:any) => updateField('auto', val)">
				  <el-radio :value="true">是</el-radio>
				  <el-radio :value="false">否</el-radio>
				</el-radio-group>
			</el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'

interface Props {
  text?: string
  total?:number
  auto?:boolean
  [key: string]: any
}

const props = defineProps<Props>()
const emit = defineEmits(['config-change'])

const activeTab = ref('basic')

const localConfig = reactive<Record<string, any>>({
  text: props.text ?? '',
  total: props.total ?? 1,
  auto: typeof props.auto === 'boolean' ? props.auto : true,
})

function updateField(key: string, value: any) {
  localConfig[key] = value
  emit('config-change', { key, value })
}

// 监听 props 字段变化，自动同步本地表单
watch(
  () => ({ ...props }),
  (newProps) => {
    localConfig.text = newProps.text || ''
	localConfig.total = newProps.total || 1
	localConfig.auto = typeof newProps.auto === 'boolean' ? newProps.auto : true
  },
  { immediate: true, deep: true }
)
</script>

<style scoped>
.image-option-panel {
  width: 100%;
  height: 100%;
  background: var(--art-main-bg-color);
}
.config-tabs {
  height: 100%;
}
.config-section {
  padding: 16px 0;
}
</style>
    